<template>
    <div class="main relative">
        <div class="head">
            <i class="recycle-icon"></i>
            <p class="title">回收站</p>
        </div>
        <ul class="file-type-menu">
            <li class="fl pointer" :class="pageType === 0? 'active' : ''" @click="changeType(0)">个人文件</li>
            <li class="fl pointer" :class="pageType === 1? 'active' : ''" @click="changeType(1)">协作文件</li>
        </ul>
        <div class="button-box">
            <button class="fl" @click="showReductionModel()">全部还原</button>
            <button class="fl">清空全部</button>
            <div class="search-box fr relative">
                <img class="icon fl " src="@/assets/icon/search_icon.png">
                <input v-model="searchContent" placeholder="搜索">
            </div>
        </div>
        <p class="file-count">共<span v-text="fileCount"></span>个文件（夹）</p>
        <div class="file-table">
            <table class="table-head">
                <thead>
                <tr>
                    <td class="checkbox" width="50">
                        <check-box @clickBox="chooseAll" :status="true"
                                   :checked="isChooseAll">
                        </check-box>

                        <!--<input type="checkbox" v-model="isChooseAll" @click="chooseAll($event)"/>-->
                    </td>
                    <td class="name">文件名</td>
                    <td class="time">删除时间</td>
                    <td class="size">文件大小</td>
                    <!--<td class="edit" >操作</td>-->
                </tr>
                </thead>
            </table>
            <div class="file-list relative" ref="fileListBox">
                <table>
                    <tbody>
                    <tr v-for="(file,key) in fileList" :key="key"
                        :class="chooseFileList.indexOf(file.fileId) > -1 ? 'active' : ''"
                        @click.right="showRightMenu($event,file)">
                        <td class="checkbox">
                            <!--<input type="checkbox" @click.stop="chooseFileChange($event,file)"-->
                                   <!--:checked="chooseFileList.indexOf(file.id) > -1"/>-->
                            <check-box @clickBox="chooseFileChange($event,file)"
                                       :checked="chooseFileList.indexOf(file.fileId) > -1">
                            </check-box>

                        </td>
                        <td class="name">
                            <check-icon class="icon-box fl" :fileData="file"></check-icon>
                            <p class="fr" v-text="file.name"></p>
                        </td>
                        <td class="time" v-text="publicFun.rebuildTime(file.deleteTime,1)">删除时间</td>
                        <td class="size relative">
                            <span v-text="publicFun.getFileSize(file.size)"></span>
                            <div class="hover-box">
                                <button @click="showReductionModel(file)">还原</button>
                                <button @click="showDeleteModel(file)">彻底删除</button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <loading v-show="pageLoading"></loading>
        <dialog-box v-show="deleteModel" title="彻底删除" @clickCancel="cancel('delete')" @clickOk="alertOk('delete')">
            <div class="model-box">
                <p v-show="reductionStatus === 0" class="alert-text">是否彻底删除所选文件，删除后无法修复</p>
                <p v-show="reductionStatus === 1" class="alert-text">是否彻底删除所选文件，删除后无法修复</p>
            </div>

        </dialog-box>
        <dialog-box v-show="reductionModel" title="还原" @clickCancel="cancel('reduction')" @clickOk="alertOk('reduction')">
            <div class="model-box">
                <p v-show="reductionStatus === 0" class="alert-text">是否还原所选文件</p>
                <p v-show="reductionStatus === 1" class="alert-text">是否还原全部文件</p>
            </div>
        </dialog-box>

    </div>
</template>

<script>
  import CheckIcon from '@/components/CheckIcon.vue'
  import Loading from '@/components/Loading.vue'
  import DialogBox from '@/components/DialogBox'

  export default {
    name: "recycleBin",
    data() {
      return {
        deleteStatus: 0,
        reductionStatus: 1,
        deleteModel: false,
        reductionModel: false,
        fileCount: 0,
        searchContent: '',
        fileList: [],
        isChooseAll: false,
        chooseFileList: [],
        pageLoading: false,
        showDeleteButton: false,
        pageType: 0,
        currentFile:{}
      }
    },
    computed: {
      getCompanyInfo() {
        return this.$store.state.company.companyInfo;
      }
    },
    components: {
      CheckIcon,
      Loading,
      DialogBox
    },
    created() {
      this.getRecycleBucket(0)
    },
    watch:{
      searchContent:function () {
        this.searchChange()
      }
    },
    methods: {
      changeType:function(type){
        this.pageType = type
        this.getRecycleBucket(0)
      },
      searchChange:function(){
        const that = this
        this.fileList = this.initFileList.filter(function (faileData) {
          return faileData.name.indexOf(that.searchContent) > -1
        })
        this.fileCount = this.fileList.length
      },
      cancel: function (type) {
        if (type === 'delete') {
          this.deleteModel = false
        } else {
          this.reductionModel = false
        }
      },
      chooseAll: function (checked) {
        this.chooseFileList = []
        const that = this
        this.isChooseAll = checked
        if (checked) {
          this.fileList.forEach(function (fileData) {
            that.chooseFileList.push(fileData.fileId)
          })
        }
      },
      alertOk:function(type){
        if(type === 'delete'){
          if(this.deleteStatus === 0){
            this.deleteFile(this.currentFile)
          }else{
            this.deleteFile(this.currentFile)
          }
          this.deleteModel = false
        }else{
          if(this.reductionStatus === 0){
            this.reductionFile(this.currentFile)
          }else{
            this.reductionAll()
          }
          this.reductionModel = false
        }
      },

      chooseFileChange: function (checked,fileData) {
        const index = this.chooseFileList.indexOf(fileData.fileId)
        if (checked) {
          if (index === -1) {
            this.chooseFileList.push(fileData.fileId)
            this.checkChooseAll()
          }
        } else {
          if (index !== -1) {
            this.chooseFileList.splice(index, 1)
            this.checkChooseAll()
          }
        }
      },

      showDeleteModel: function (file) {
        if(file){
          this.currentFile = file
          this.deleteStatus = 0
        }else{
          this.deleteStatus = 1
        }
        this.deleteModel = true
      },

      showReductionModel: function (file) {
        if(file){
          this.currentFile = file
          this.reductionStatus = 0
        }else{
          this.reductionStatus = 1
        }
        this.reductionModel = true
      },

      reductionFile: function (fileData) {
        let reductionArr = [{
          id: fileData.fileId,
          recycle: false,
        }]
        this.editFiles(reductionArr)
      },

      reductionAll: function () {
        let reductionArr = []
        this.fileList.forEach(function (file) {
          reductionArr.push({
            id: file.fileId,
            recycle: false
          })
        })
        this.editFiles(reductionArr)
      },

      deleteFile: function (fileData) {
        let reductionArr = [{
          id: fileData.fileId,
          del: true
        }]
        this.editFiles(reductionArr)
      },

      editFiles: function (deleteArr) {
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/files/v1', deleteArr).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.getRecycleBucket(0)
          }
        })
      },

      deletePost: function (deleteArr) {
        const that = this
        this.pageLoading = true
        this.$http.post('/pan/file/recycle/multiple/v1', {
          idList: deleteArr
        }).then(function (data) {
          console.log(data.length);
          that.pageLoading = false
          if (data.data.code === 1) {
            that.getRecycleBucket(0)
          }
        })
      },

      getDeleteArr: function () {
        let deleteArr = []
        this.chooseFileList.forEach(function (fileId) {
          deleteArr.push({
            id: fileId,
            recycle: true,
          })
        })
        return deleteArr
      },

      checkChooseAll: function () {
        if (this.chooseFileList.length !== 0 && this.chooseFileList.length === this.fileList.length) {
          this.isChooseAll = true
        } else {
          this.isChooseAll = false
        }
      },

      getRecycleBucket: function (page, size = 10000) {
        const that = this
        this.pageLoading = true
        let url = '/pan/file/recycle/personal/v1/' + page + '/' + size
        if(this.pageType === 1){
          url = '/pan/file/recycle/public/v1/' + page + '/' + size
        }
        this.$http.get(url).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.initFileList = data.data.data
            that.searchContent = ''
            that.fileList = that.initFileList
            that.fileCount = that.fileList.length

          }
        })
      }
    }
  }
</script>

<style scoped>

    .alert-text{
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        padding:20px 48px;
    }

    .main {
        width: 100%;
    }

    .main .head {
        height: 60px;
        position: relative;
    }

    .main .head .title {
        line-height: 60px;
        font-size: 14px;
        color: #999999;
        letter-spacing: 1px;
        padding-left: 70px;
    }

    .main .head .recycle-icon {
        background-image: url(/icon/menu_icon2.png);
        background-repeat: no-repeat;
        background-size: 23px;
        height: 24px;
        width: 24px;
        content: '';
        position: absolute;
        top: 18px;
        left: 30px;
        background-position: 0 -292px;
    }

    .main .file-type-menu {
        height: 30px;
        border-bottom: solid #E0E1EA 1px;
        margin: 0 16px;
    }

    .main .file-type-menu li {
        font-size: 14px;
        letter-spacing: 1px;
        margin: 0 20px;
        line-height: 30px;
        height: 30px;
    }

    .main .file-type-menu .active {
        color: #4690F5;
        position: relative;
    }

    .main .file-type-menu .active:before {
        content: '';
        height: 2px;
        width: 34px;
        background: #4690F5;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .main .button-box {
        height: 30px;
        margin-top: 20px;
        padding-left: 20px;
    }

    .main .button-box button {
        border: 1px solid #4690F5;
        border-radius: 2px;
        padding: 0 19px;
        font-size: 14px;
        color: #4690F5;
        letter-spacing: 1px;
        height: 28px;
        margin-left: 20px;
    }

    .main .button-box .search-box {
        width: 290px;
        height: 29px;
        background: #ECEFF6;
        border-radius: 14.5px;
        margin-right: 13px;
        overflow: hidden;
    }

    .main .button-box .search-box .icon {
        height: 15px;
        width: 15px;
        margin: 8px 10px;
        position: absolute;
    }

    .main .button-box .search-box input {
        width: 290px;
        height: 29px;
        background: #ECEFF6;
        border: none;
        padding-left: 30px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .main .file-count {
        margin-top: 14px;
        padding-left: 43px;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.86px;
    }

    .main .file-count span {
        color: #4690F5;
    }


    .file-table {
        padding: 10px;
        box-sizing: border-box;
        height: calc(100vh - 180px);
    }

    .file-table table {
        width: 100%;
    }

    .model-box{
        height: 75px;
    }

    .table-head {
        width: 100%;
        background: #F6F6F6;
        height: 40px;
    }

    .table-head thead tr {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        color: #666666;
        letter-spacing: 1px;
    }

    table .checkbox {
        width: 40px;
        text-align: center;
    }

    .file-table table .size {
        width: 100px;
    }

    .file-table table .time {
        width: 150px;
    }

    .file-table table .name {
    }

    .file-table table tbody td {
        font-size: 14px;
        vertical-align: middle;
        height: 40px;
    }

    .file-table table tbody tr {
        position: relative !important;
        border-bottom: 1px solid #D8D9E5;
    }

    .file-table table tbody tr:hover {
        background: #F2F5FC;

    }

    .file-table table tbody tr:hover .hover-box {
        display: block;
    }


    .hover-box {
        vertical-align: middle;
        position: absolute;
        right: 0;
        top: 0;
        background: #F2F5FC;
        display: none;
        width: 300px;
        height: 40px;
        padding-left: 30px;
        box-sizing: border-box;

    }

    .hover-box button {
        margin-top: 6px;
        padding: 0 18px;
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
        border-radius: 2px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        height: 28px;
        margin-right: 30px;
    }

    .file-table table .name p {
        width: calc(100% - 80px);
        float: left;
        right: 0;
        top: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        line-height: 25px;
        padding-left: 40px;
        vertical-align: middle;

    }

    .file-table table .edit {
        width: 100px;
    }


</style>
